﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Building a better web forms: Context highlighting using jQuery - Example</title>

<script>
		$(document).ready(function()
		{
			$('.wacFormContent .left, .wacFormContent input, .wacFormContent textarea, .wacFormContent select').focus(function(){
				$(this).parents('.wacFormContent').addClass("wacFormOver");
			}).blur(function(){
				$(this).parents('.wacFormContent').removeClass("wacFormOver");
			});
			$('.wacFormContentA .left, .wacFormContentA input, .wacFormContentA textarea, .wacFormContentA select').focus(function(){
				$(this).parents('.wacFormRow').addClass("wacFormOver");
			}).blur(function(){
				$(this).parents('.wacFormRow').removeClass("wacFormOver");
			});
		});
</script>
</head>

<body>
    <form method="post" class="wacFormA">
        <h2>测试字形</h2>
        <p>测试字形测试字形</p>
        <div class="wacFormFirstCol">
            <h3>Row highlighting</h3>
            <div class="wacFormContentA">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">First name</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText DataTD ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Last name</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Email</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Password</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <hr class="wacFormRuler" />
            <div class="wacFormContentA">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Address</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Postal</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">City</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Country</div>
                    <div class="wacFormItemRight"><select name="Select1" style="width: 195px">
                            <option></option>
                        </select></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <hr class="wacFormRuler" />
            <div class="wacFormContentA">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Account type</div>
                    <div class="wacFormItemRight">
                        <input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
                        <br />
                        <input checked="checked" name="Radio1" type="radio" />Pro 9.99$
                        <br />
                        <input checked="checked" name="Radio1" type="radio" />Expert 19.99$
                    </div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Some description</div>
                    <div class="wacFormItemRight"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <input name="Button1" type="button" value="Do some action" />
        </div>
        <div class="wacFormSecondCol">
            <h3>Group highlighting</h3>
            <div class="wacFormContent">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">First name</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Last name</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Email</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Password</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <hr class="wacFormRuler" />
            <div class="wacFormContent">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Address</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Postal</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">City</div>
                    <div class="wacFormItemRight"><input name="Text1" type="text" class="wacFormText ui-widget-content ui-corner-all" /></div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Country</div>
                    <div class="wacFormItemRight"><select name="Select1" style="width: 195px">
                            <option></option>
                        </select></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <hr class="wacFormRuler" />
            <div class="wacFormContent">
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Account type</div>
                    <div class="wacFormItemRight">
                        <input checked="checked" name="Radio1" type="radio" />Basic (Free registration)
                        <br />
                        <input checked="checked" name="Radio1" type="radio" />Pro 9.99$
                        <br />
                        <input checked="checked" name="Radio1" type="radio" />Expert 19.99$
                    </div>
                    <div class="wacFormClear"></div>
                </div>
                <div class="wacFormRow">
                    <div class="wacFormItemLeft">Some description</div>
                    <div class="wacFormItemRight"><textarea name="TextArea1" cols="22" rows="3"></textarea></div>
                    <div class="wacFormClear"></div>
                </div>
            </div>
            <input name="Button1" type="button" value="Do some action" />
        </div>
    </form>
</body>

</html>
